import React, { useState, useEffect } from 'react';
import style from "./Characterimage.module.css";
import Holidayhottopics1 from '../../assets/images/Summersolarterms/5.webp';
import Holidayhottopics2 from '../../assets/images/Summersolarterms/6.webp';
import Holidayhottopics3 from '../../assets/images/Summersolarterms/7.webp';
import Holidayhottopics4 from '../../assets/images/Summersolarterms/8.webp';
import Holidayhottopics5 from '../../assets/images/Holidayhottopics/5.png';
import Holidayhottopics6 from '../../assets/images/Holidayhottopics/6.png';
import Holidayhottopics7 from '../../assets/images/Holidayhottopics/7.png';
import Holidayhottopics8 from '../../assets/images/Holidayhottopics/8.png';
import Holidayhottopics9 from '../../assets/images/Holidayhottopics/9.png';
import Holidayhottopics10 from '../../assets/images/Holidayhottopics/10.png';
import Holidayhottopics11 from '../../assets/images/Holidayhottopics/11.png';
import Holidayhottopics12 from '../../assets/images/Holidayhottopics/12.png';
import Holidayhottopics13 from '../../assets/images/Holidayhottopics/13.png';
import Holidayhottopics14 from '../../assets/images/Holidayhottopics/14.png';
import Holidayhottopics15 from '../../assets/images/Holidayhottopics/15.png';
import Holidayhottopics16 from '../../assets/images/Holidayhottopics/16.png';
import Holidayhottopics17 from '../../assets/images/Holidayhottopics/17.png';
import Holidayhottopics18 from '../../assets/images/Holidayhottopics/18.png';
import Holidayhottopics19 from '../../assets/images/Holidayhottopics/19.png';
import Holidayhottopics20 from '../../assets/images/Holidayhottopics/20.png';
import Holidayhottopics21 from '../../assets/images/Holidayhottopics/21.png';
import Holidayhottopics22 from '../../assets/images/Holidayhottopics/22.png';
import Holidayhottopics23 from '../../assets/images/Holidayhottopics/23.png';
import Holidayhottopics24 from '../../assets/images/Holidayhottopics/24.png';
import Holidayhottopics25 from '../../assets/images/Holidayhottopics/25.png';
import Holidayhottopics26 from '../../assets/images/Holidayhottopics/26.jpg';
import Holidayhottopics27 from '../../assets/images/Holidayhottopics/27.png';
import Holidayhottopics28 from '../../assets/images/Holidayhottopics/28.png';
import Summer1 from '../../assets/images/Summersolarterms/1.webp';
import Summer2 from '../../assets/images/Summersolarterms/2.webp';
import Summer3 from '../../assets/images/Summersolarterms/3.webp';
import Summer4 from '../../assets/images/Summersolarterms/4.webp';
import Summer5 from '../../assets/images/Summer/5.jpg';
import Summer6 from '../../assets/images/Summer/6.jpg';
import Summer8 from '../../assets/images/Summer/8.jpg';
import Summer9 from '../../assets/images/Summer/9.jpg';
import Summer10 from '../../assets/images/Summer/10.jpg';

import './Holidayhottopics.scss';

function Characterimage() {
    const picture = () => {
        console.log(1112);
    }
    //
    const summerweather = [
        {
            img: Summer1
        },
        {
            img: Summer2
        },
        {
            img: Summer3
        },
        {
            img: Summer4
        },
        {
            img: Summer5
        },
        {
            img: Summer6
        },
        {
            img: Summer8
        },
        {
            img: Summer9
        },
        {
            img: Summer10
        },
    ]
    //是否显示左按钮
    const [leftflag1, setLeftFlag1] = useState(false)
    const [rightflag1, setRightFlag1] = useState(true)
    //向左移动的偏移量
    const [leftPosition, setLeftPosition] = useState(0);
    //样式
    const [contentStyle1, setContentStyle1] = useState({
        width: '3100px',
        height: "100%",
        display: "flex",
        position: "absolute",
        transition: "left 0.3s linear",
        top: '0',
        left: "0"
    })
    const toright1 = () => {
        // 重置到最左边  
        setLeftPosition(prev => prev + 400);
    }
    const toleft1 = () => {
        setLeftPosition(prev => prev - 400);
        setLeftFlag1(true)
    }


    useEffect(() => {
        setContentStyle1(pre => ({
            ...pre,
            left: `${leftPosition}px`
        }))
        if (leftPosition <= -1400) {
            setRightFlag1(false)
            setLeftFlag1(true)
            setTimeout(() => {
            }, 500);
        }
        else if (leftPosition >= 0) {
            setRightFlag1(true)
            setLeftFlag1(false)
        }
    }, [leftPosition])
    return (
        <div className='Holidayhottopics'>
            <ul className='Holidayhottopicsul'>
                <li>
                    <img src={Holidayhottopics1} alt="" />
                    <div className='Solartermelements'>
                        <h1>节气元素</h1>
                        <p>582 张</p>
                    </div>
                    <div className='overlay'>
                        <div className='overlay-content'>
                            <ul className='overlay-contentul'>
                                <li><img src={Holidayhottopics5} alt="" /></li>
                                <li><img src={Holidayhottopics6} alt="" /></li>
                                <li><img src={Holidayhottopics7} alt="" /></li>
                                <li><img src={Holidayhottopics10} alt="" /></li>
                                <li><img src={Holidayhottopics8} alt="" /></li>
                                <li><img src={Holidayhottopics9} alt="" /></li>
                            </ul>
                            <h2 className='h2'>节气元素</h2>
                            <p className='zhang'>582 张</p>
                            <div className='butgeng'>立即查看</div>
                        </div>
                    </div>
                </li>
                <li>
                    <img src={Holidayhottopics2} alt="" />
                    <div className='Solartermelements'>
                        <h1>生肖插画</h1>
                        <p>1165 张</p>
                    </div>
                    <div className='overlay'>
                        <div className='overlay-content'>
                            <ul className='overlay-contentul'>
                                <li><img src={Holidayhottopics11} alt="" /></li>
                                <li><img src={Holidayhottopics12} alt="" /></li>
                                <li><img src={Holidayhottopics13} alt="" /></li>
                                <li><img src={Holidayhottopics14} alt="" /></li>
                                <li><img src={Holidayhottopics15} alt="" /></li>
                                <li><img src={Holidayhottopics16} alt="" /></li>
                            </ul>
                            <h2 className='h2'>生肖插画</h2>
                            <p className='zhang'>1165 张</p>
                            <div className='butgeng'>立即查看</div>
                        </div>
                    </div>
                </li>
                <li>
                    <img src={Holidayhottopics3} alt="" />
                    <div className='Solartermelements'>
                        <h1>节日装饰</h1>
                        <p>3088 张</p>
                    </div>
                    <div className='overlay'>
                        <div className='overlay-content'>
                            <ul className='overlay-contentul'>
                                <li><img src={Holidayhottopics17} alt="" /></li>
                                <li><img src={Holidayhottopics18} alt="" /></li>
                                <li><img src={Holidayhottopics19} alt="" /></li>
                                <li><img src={Holidayhottopics20} alt="" /></li>
                                <li><img src={Holidayhottopics21} alt="" /></li>
                                <li><img src={Holidayhottopics22} alt="" /></li>
                            </ul>
                            <h2 className='h2'>节日装饰</h2>
                            <p className='zhang'>3088 张</p>
                            <div className='butgeng'>立即查看</div>
                        </div>
                    </div>
                </li>
                <li>
                    <img src={Holidayhottopics4} alt="" />
                    <div className='Solartermelements'>
                        <h1>劳动节</h1>
                        <p>315 张</p>
                    </div>
                    <div className='overlay'>
                        <div className='overlay-content'>
                            <ul className='overlay-contentul'>
                                <li><img src={Holidayhottopics23} alt="" /></li>
                                <li><img src={Holidayhottopics24} alt="" /></li>
                                <li><img src={Holidayhottopics25} alt="" /></li>
                                <li><img src={Holidayhottopics26} alt="" /></li>
                                <li><img src={Holidayhottopics27} alt="" /></li>
                                <li><img src={Holidayhottopics28} alt="" /></li>
                            </ul>
                            <h2 className='h2'>劳动节</h2>
                            <p className='zhang'>315 张</p>
                            <div className='butgeng'>立即查看</div>
                        </div>
                    </div>
                </li>
            </ul>
            <div className='button' onClick={picture}>
                <span>更多素材</span>
            </div>
            <div className={style.ban1}>
                <h2>夏季天气</h2>
                <div className={style.log1}>
                    <ul style={{ ...contentStyle1 }}>
                        {
                            summerweather.map((item, index) => {
                                return <li key={index} className={style.logimg1}>
                                    <img src={item.img} alt="" className={style.logim1} />
                                </li>
                            })
                        }
                    </ul>
                    {
                        leftflag1 ? <i className={style.zuo1} onClick={toright1}>&gt; </i> : ''
                    }
                    {
                        rightflag1 ? <i className={style.you1} onClick={toleft1}> &lt;</i> : ''
                    }
                </div>
            </div>
        </div>
    );
}

export default Characterimage;